<!-- 路由 -->
<template>
    <el-row>
        <el-col class="page-top-btn-group">
            <el-button size="small" type="primary" icon="Plus" @click="showAddForm(0)">
                新增
            </el-button>
            <el-button size="small" type="primary" icon="Delete" @click="delAllChose()">
                删除选中
            </el-button>
        </el-col>
    </el-row>

    <el-row>
        <el-col>
            <el-tree ref="routeTree" :data="routes" node-key="id" show-checkbox :expand-on-click-node="false">
                <template #default="{ data }">
                    <span>{{ data.name }}</span>
                    <span class="route-type" :class="'route-type-' + data.type">{{ renderRouteType(data.type) }}</span>

                    <el-icon size="small" class="m-l-5 m-r-5" @click="showAddForm(data.id)">
                        <Plus />
                    </el-icon>
                    <el-icon size="small" class="m-l-5 m-r-5" @click="showEditForm(data)">
                        <Edit />
                    </el-icon>

                </template>
            </el-tree>
        </el-col>
    </el-row>

    <!-- 新增弹框 -->
    <el-dialog v-model="addForm.showDialog" title="新增路由">
        <el-form ref="addFormRef" :model="addForm.formData" label-width="auto" :rules="addForm.rules">
            <el-form-item label="名称" prop="name">
                <el-input v-model="addForm.formData.name"></el-input>
            </el-form-item>
            <el-form-item label="路径">
                <el-input v-model="addForm.formData.path"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select v-model="addForm.formData.type" placeholder="类型">
                    <el-option v-for="(text, idx ) in typeOptions" :label="text" :value="idx" />
                </el-select>
            </el-form-item>
            <el-form-item label="上级路由" prop="pid">

                <el-tree-select v-model="addForm.formData.pid" :data="routeSelect"
                    :props="{ checkStrictly: true, label: 'name', value: 'id' }" check-strictly value-key="id"
                    :render-after-expand="false">

                    <template #default="{ data }">
                        <span>{{ data.name }}</span>
                        <span class="route-type" :class="'route-type-' + data.type">{{ renderRouteType(data.type) }}</span>
                    </template>
                </el-tree-select>

                <!-- <el-cascader v-model="addForm.formData.pid" :show-all-levels="false" :options="routeSelect"
                    :props="{ checkStrictly: true, label: 'name', value: 'id' }" clearable>
                    <template #default="{ node, data }">
                        <span>{{ data.name }}</span>
                        <span class="route-type" :class="'route-type-' + data.type">{{ renderRouteType(data.type) }}</span>

                    </template>
                </el-cascader> -->
            </el-form-item>
            <el-button @click="addSub(addFormRef)" :loading="addForm.onSubmiting">提交</el-button>
        </el-form>
    </el-dialog>

    <!-- 编辑弹框 -->
    <el-dialog v-model="editForm.showDialog" title="编辑路由">
        <el-form ref="editFormRef" :model="editForm.formData" label-width="auto" :rules="editForm.rules">
            <el-form-item label="名称" prop="name">
                <el-input v-model="editForm.formData.name"></el-input>
            </el-form-item>
            <el-form-item label="路径" prop="path">
                <el-input v-model="editForm.formData.path"></el-input>
            </el-form-item>
            <el-form-item label="类型" prop="type">
                <el-select v-model="editForm.formData.type" placeholder="类型">
                    <el-option v-for="(text, idx ) in typeOptions" :label="text" :value="idx" />
                </el-select>
            </el-form-item>
            <el-form-item label="上级路由" prop="pid">

                <el-tree-select v-model="editForm.formData.pid" :data="routeSelect"
                    :props="{ checkStrictly: true, label: 'name', value: 'id' }" check-strictly value-key="id"
                    :render-after-expand="false">

                    <template #default="{ data }">
                        <span>{{ data.name }}</span>
                        <span class="route-type" :class="'route-type-' + data.type">{{ renderRouteType(data.type) }}</span>
                    </template>
                </el-tree-select>
            </el-form-item>
            <el-button @click="editSub(editFormRef)" :loading="editForm.onSubmiting">更新</el-button>
        </el-form>
    </el-dialog>
    <!-- END 编辑弹框 -->
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue'
import routeApi from '@/api/route'
import RouteCode from '@/constants/RouteCode'
import msgUtil from '@/utils/msgUtil'
import arr from '@/utils/arr'

// tree 组件对象
const routeTree = ref()
const addFormRef = ref()
const editFormRef = ref()

const routes = ref([])
// 路由下拉框
const routeSelect = ref([]);
const typeOptions = reactive(RouteCode.textOfType())

// 新增表单的初始数据
const initAddForm = () => {
    return {
        pid: 0,
        name: '',
        path: '',
        type: '1',
    }
};
const addForm = ref({
    showDialog: false,
    onSubmiting: false,
    formData: initAddForm(),
    rules: {
        name: [{ required: true, message: '必填' }],
        type: [{ required: true, message: '必填' }],
        pid: [{ required: true, message: '必填' }],

    }
})
const editForm = ref({
    showDialog: false,
    onSubmiting: false,
    formData: {},
    rules: {
        name: [{ required: true, message: '必填' }],
        type: [{ required: true, message: '必填' }],
        pid: [{ required: true, message: '必填' }],

    }
})

// 加载数据
function loadAllRoute() {
    routeApi.all().then(res => {
        msgUtil.alertIfError(res).then(apiRes => {
            routes.value = apiRes.data.tree;
            routeSelect.value = [
                {
                    name: '根路由',
                    id: 0,
                    type: 1,
                    children: apiRes.data.tree,
                }
            ]
        })
    })
}
// 渲染类型文字
function renderRouteType(type) {
    return RouteCode.textOfType(type)
}

// 弹窗新增
function showAddForm(pid = 0) {
    addForm.value.showDialog = true
    addForm.value.formData = arr.merge(initAddForm(), { pid })
}

// 提交新增
function addSub(formEl) {

    formEl.validate((valid, fields) => {
        if (!valid) {
            return;
        }
        if (addForm.value.onSubmiting) {
            return;
        }
        addForm.value.onSubmiting = true;

        routeApi.add(addForm.value.formData).then(res => {
            msgUtil.handleApiRes(res, {
                onApiSuccess() {
                    loadAllRoute();
                    addForm.value.showDialog = false
                }
            })
        }).finally(() => {
            addForm.value.onSubmiting = false;
        })
    })

}

// 弹窗编辑
function showEditForm(data) {
    editForm.value.showDialog = true
    editForm.value.formData = arr.coverFieldType(data, { type: 'string' })
}

// 提交编辑
function editSub(formEl) {

    formEl.validate((valid, fields) => {
        if (!valid) {
            return;
        }
        if (editForm.value.onSubmiting) {
            return;
        }
        editForm.value.onSubmiting = true;

        routeApi.update(editForm.value.formData).then(res => {
            msgUtil.handleApiRes(res, {
                onApiSuccess() {
                    loadAllRoute();
                    editForm.value.showDialog = false
                }
            })
        }).finally(() => {
            editForm.value.onSubmiting = false;
        })
    })
}

// 删除所有选中
function delAllChose() {

    let keys = routeTree.value.getCheckedKeys();
    if (keys.length === 0) {
        msgUtil.warnMsg({
            message: '请先选择'
        })
        return;
    }
    msgUtil.dangerAction({
        message: '删除操作不可逆，请谨慎操作'
    })
        .then(res => {
            routeApi.del(keys).then(res => {
                msgUtil.handleApiRes(res, {
                    onApiSuccess() {
                        loadAllRoute();

                    }
                })
            })
        })

}

onMounted(() => {
    loadAllRoute();
})

</script>
<style>
.route-type {
    font-size: small;
    margin-left: 20px;
}

.route-type-1 {
    color: #409EFF;
}

.route-type-2 {
    color: #33699f;
}

.route-type-3 {
    color: #67C23A;
}

.route-type-4 {
    color: #F56C6C;
}
</style>